<template>
  <div class="user-settings">
    <el-card>
      <div class="settings-title">个人设置</div>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="90px" class="settings-form">
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="form.realName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="1" />
            <el-option label="女" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input :value="computedAge" readonly />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="出生日期" prop="birthDate">
          <el-date-picker v-model="form.birthDate" type="date" placeholder="请选择出生日期" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getUserInfoApi, saveUserInfoApi } from '../api/user'
import { getPatientInfoApi, savePatientInfoApi } from '../api/patient'

const formRef = ref()
const form = ref({
  id: '',
  userId: '',
  realName: '',
  gender: '',
  phone: '',
  birthDate: '',
  idCard: '',
  address: ''
})

// 年龄自动计算
const computedAge = computed(() => {
  if (form.value.birthDate) {
    const birthDate = new Date(form.value.birthDate)
    const today = new Date()
    let age = today.getFullYear() - birthDate.getFullYear()
    const m = today.getMonth() - birthDate.getMonth()
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
      age--
    }
    return age >= 0 ? age : ''
  }
  return ''
})

const rules = {
  realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  birthDate: [{ required: true, message: '请选择出生日期', trigger: 'blur' }],
  idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
}
const onSave = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        // 组装后端需要的user对象
        const user = {
          id: form.value.id,
          userId: form.value.userId,
          realName: form.value.realName,
          gender: form.value.gender,
          phone: form.value.phone,
          birthDate: form.value.birthDate,
          idCard: form.value.idCard,
          address: form.value.address
        }
        const res = await savePatientInfoApi(user)
        if (res && res.code === 200) {
          ElMessage.success('保存成功')
        } else {
          ElMessage.error(res.msg || '保存失败')
        }
      } catch (e) {
        ElMessage.error('保存失败')
      }
    }
  })
}
const onReset = () => {
  form.value = {
    id: '',
    userId: '',
    realName: '',
    gender: '',
    phone: '',
    birthDate: '',
    idCard: '',
    address: ''
  }
}

onMounted(async () => {
  try {
    const res = await getPatientInfoApi()
    if (res && res.data) {
      const user = res.data
      form.value.id = user.id || ''
      form.value.userId = user.userId || ''
      form.value.realName = user.realName || ''
      form.value.gender = user.gender !== undefined ? String(user.gender) : ''
      form.value.phone = user.phone || ''
      form.value.birthDate = user.birthDate || ''
      form.value.idCard = user.idCard || ''
      form.value.address = user.address || ''
    }
  } catch (e) {
    ElMessage.error('获取用户信息失败')
  }
})
</script>
<style scoped>
.user-settings {
  max-width: 500px;
  margin: 40px auto;
}
.settings-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1976d2;
  margin-bottom: 24px;
  text-align: center;
  letter-spacing: 2px;
}
.settings-form {
  margin-top: 18px;
}
</style> 